<template>
  <div class="add-task">
    <common-block :activeNum="activeNum" :steps="steps" :saveFlag="true">
      <div class="title" slot="title">选择数据</div>
    </common-block>
    <div class="bottom bottom-1" v-if="activeNum === 0">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>任务名称</th>
          <td colspan="1"><el-input /></td>
          <th>首页地址</th>
          <td colspan="3">
            <el-input placeholder="请输入内容">
              <template slot="append"><el-button>获取标题</el-button></template>
            </el-input>
          </td>
        </tr>
        <tr>
          <th>包含性下载过滤</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>排除性下载过滤</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>任务标签</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
        </tr>
        <tr>
          <th>包含性更新过滤</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>排除性更新过滤</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>更新周期(分钟)</th>
          <td colspan="1">
            <el-input />
          </td>
        </tr>
        <tr>
          <th>包含性下载过滤(js)</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>排除性下载过滤(js)</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>任务用时</th>
          <td colspan="1">
            <el-input />
          </td>
        </tr>
        <tr>
          <th>包含性更新过滤(js)</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>排除性更新过滤(js)</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>失败数量</th>
          <td colspan="1">
            <el-input />
          </td>
        </tr>
        <tr>
          <th>下载范围外的目录</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>多首页</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>完成数量</th>
          <td colspan="1">
            <el-input />
          </td>
        </tr>
        <tr>
          <th>代理地址列表</th>
          <td colspan="1">
            <el-input placeholder="请输入内容">
              <template slot="append">
                <el-button
                  style="
                    border: 1px solid #ddd;
                    margin-right: 0.1rem;
                    font-weight: bold;
                  "
                  >-</el-button
                >
                <el-button style="border: 1px solid #ddd; font-weight: bold"
                  >+</el-button
                >
              </template>
            </el-input>
          </td>
          <th>代理使用率</th>
          <td colspan="1"><el-input /></td>
          <th>超时重试次数</th>
          <td colspan="1"><el-input /></td>
        </tr>
        <tr>
          <th>状态</th>
          <td colspan="1">STOPPED</td>
          <th>任务进度</th>
          <td colspan="3">62.93</td>
        </tr>
        <tr>
          <th>链接解析</th>
          <td colspan="5">2021-08-20 09:33:23</td>
        </tr>
      </table>
    </div>
    <div class="bottom bottom-2" v-if="activeNum === 1">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>任务名称</th>
          <td colspan="1"><el-input /></td>
          <th>首页地址</th>
          <td colspan="3">
            <el-input placeholder="请输入内容"></el-input>
          </td>
        </tr>
        <tr>
          <th>启用更新</th>
          <td colspan="1">
            <el-switch active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </td>
          <th>启动时更新</th>
          <td colspan="1">
            <el-switch active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </td>
          <th>更新间隔(分钟)</th>
          <td colspan="1">
            <el-input type="number" />
          </td>
        </tr>
        <tr>
          <th>是否包含查询参数</th>
          <td colspan="1">
            <el-switch active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </td>
          <th>新窗口预览</th>
          <td colspan="1">
            <el-switch active-color="#13ce66" inactive-color="#ff4949">
            </el-switch>
          </td>
          <th>下载线程数量</th>
          <td colspan="1">
            <el-input type="number" />
          </td>
        </tr>
        <tr>
          <th>下载超时时间(ms)</th>
          <td colspan="1">
            <el-input type="number" />
          </td>
          <th>域名转换配置</th>
          <td colspan="3">
            <div style="display: flex">
              <span style="display: block; width: 10rem; line-height: 2.5rem"
                >原始域名</span
              >
              <el-input placeholder="请输入内容"></el-input>
              <span
                style="
                  display: block;
                  width: 10rem;
                  line-height: 2.5rem;
                  margin-left: 2rem;
                "
                >替代域名</span
              >

              <el-input placeholder="请输入内容">
                <template slot="append">
                  <el-button
                    style="
                      border: 1px solid #ddd;
                      margin-right: 0.1rem;
                      font-weight: bold;
                    "
                    >-</el-button
                  >
                  <el-button style="border: 1px solid #ddd; font-weight: bold"
                    >+</el-button
                  >
                </template>
              </el-input>
            </div>
          </td>
        </tr>
        <tr>
          <th>下载后等待时间(ms)</th>
          <td colspan="1">
            <el-input type="number" />
          </td>
          <th>域名强制解析</th>
          <td colspan="3">
            <div style="display: flex">
              <span style="display: block; width: 22rem; line-height: 2.5rem"
                >需要强制解析的域名</span
              >
              <el-input placeholder="请输入内容"></el-input>
              <span
                style="
                  display: block;
                  width: 15rem;
                  line-height: 2.5rem;
                  margin-left: 2rem;
                "
                >强制解析的ip</span
              >

              <el-input placeholder="请输入内容">
                <template slot="append">
                  <el-button
                    style="
                      border: 1px solid #ddd;
                      margin-right: 0.1rem;
                      font-weight: bold;
                    "
                    >-</el-button
                  >
                  <el-button style="border: 1px solid #ddd; font-weight: bold"
                    >+</el-button
                  >
                </template>
              </el-input>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="bottom bottom-3" v-if="activeNum === 2">
      <div class="data-title">sdfsdfsdfsdf</div>
      <table border="0" cellspacing="1" cellpadding="0">
        <tr>
          <th>任务名称</th>
          <td colspan="1"></td>
          <th>首页地址</th>
          <td colspan="3"></td>
        </tr>
        <tr>
          <th>包含性下载过滤</th>
          <td colspan="1"></td>
          <th>排除性下载过滤</th>
          <td colspan="1"></td>
          <th>任务标签</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>包含性更新过滤</th>
          <td colspan="1"></td>
          <th>排除性更新过滤</th>
          <td colspan="1"></td>
          <th>更新周期(分钟)</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>包含性下载过滤(js)</th>
          <td colspan="1"></td>
          <th>排除性下载过滤(js)</th>
          <td colspan="1"></td>
          <th>下载完成数</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>包含性更新过滤(js)</th>
          <td colspan="1"></td>
          <th>排除性更新过滤(js)</th>
          <td colspan="1"></td>
          <th>链接总数</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>下载范围外的目录</th>
          <td colspan="1"></td>
          <th>多首页</th>
          <td colspan="1"></td>
          <th>未下载总数</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>下载大小</th>
          <td colspan="1"></td>
          <th>下载文件数</th>
          <td colspan="1"></td>
          <th>创建时间</th>
          <td colspan="1"></td>
        </tr>
        <tr>
          <th>状态</th>
          <td colspan="1"></td>
          <th>任务进度</th>
          <td colspan="3"></td>
        </tr>
        <tr>
          <th>上次启动时间</th>
          <td colspan="1"></td>
          <th>任务用时</th>
          <td colspan="1"></td>
          <th>失败数量</th>
          <td colspan="1"></td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import CommonBlock from "@/components/CommonBlock.vue";
import { getTitleByUrl } from '@/api/api.js'
export default {
  components: {
    CommonBlock,
  },
  data() {
    return {
      activeNum: 0,
      steps: ["新建任务", "主要采集设置", "保存任务"],
      total: 0,
      currentPage: 1,
      selectRows: [],
      tableData: [{ 1: 1 }, {}],
    };
  },
  methods: {
    upStep() {
      this.activeNum -= 1;
    },
    downStep() {
      this.activeNum += 1;
    },
    handleCurrentChange(val) {
      this.selectRows = val;
    },
    getTitle() {
      getTitleByUrl().then(res => {
        if (res && res.data) {
          if (res.data.code === 0) {
            // 给任务名称赋值
          } else {
            this.$message.error(res.data.msg, 2);
          }
        } else {
          this.$message.error("获取数据出错了", 2);
        }
      })
    },
    backup() {
      this.activeNum = 0
      // this.tableData = []
      // this.selectRows = {}
      // this.dataViewList = []
      // this.total = 0
      // this.dataViewListTotal = 0
      // this.currentPage = 1
      // this.dataViewListCurrentPage = 1
      this.$emit('backup')
    }
  },
};
</script>
<style lang="scss" scoped>
.add-task {
  display: flex;
  flex-direction: column;
  .title {
    font-size: 1.5rem;
    color: #000;
    display: inline-block;
    font-weight: bold;
  }
  .bottom {
    flex: 1;
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    .data-title {
      border: 1px solid #ebeef5;
      padding: 0.8rem 0.5rem;
      width: 100%;
      text-align: center;
      background: #fafafa;
      font-size: 1rem;
      padding: 1rem 0;
      border-bottom: none;
    }
  }
  .el-pagination {
    width: 100%;
    text-align: right;
    padding: 0;
    margin: 0.5rem 0;
  }
  table {
    width: 100%;
    background: #e8e8e8;
    td {
      background: #fff;
      padding: 1rem 1.5rem;
      text-align: left;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
    }
    th {
      background: #fafafa;
      padding: 1rem 1.5rem;
      text-align: left;
      color: rgba(0, 0, 0, 0.85);
      font-weight: normal;
      font-size: 0.9rem;
      line-height: 1.5;
      width: 10rem;
    }
  }
}
</style>
